<template>
  <div class="radio">
    <div class="topic" v-for="(item, index) in radioTopic">
      <p class="radio_num">
        {{ index + 1 }}.
        <span class="mold">（单选题 {{ item.score }}分）</span>
      </p>

      <p class="name" v-html="item.topicSubject"></p>
      <div class="select">
        <p
          v-for="(iter, i) in item.topicOptions"
          @click="selectClick(i, index)"
        >
          <span
            class="option radios"
            :class="{ checked: currentIndex[index].select === i }"
            >{{ option[i] }}</span
          >
          <span class="text" v-html="iter"></span>
        </p>
      </div>

      <div class="correctAnswer" v-show="isSubmit">
        正确答案:
        <span class="correctOption">{{ item.answers[0] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/common/bus";

export default {
  name: "radio",
  data() {
    return {
      currentIndex: [{ select: "" }],
      isSubmit: false,
      title: null,
      option: ["a", "b", "c", "d"],
    };
  },
  props: {
    radioTopic: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    this._submited();
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.currentIndex = [];
      for (var ite in this.radioTopic) {
        alert(this.currentIndex[0].select);
        var item = { select: "" };
        this.currentIndex.push(item);

        console.log(123);
      }

      console.log(this.currentIndex);
    },
    selectClick(index, cIndex) {
      this.currentIndex[cIndex].select = index;

      const radioSelect = document.querySelectorAll(".radios");
      const val = document.querySelectorAll(".text");
      let flag = false;

      var iid = index + cIndex * 4;

      if (radioSelect[iid].classList.value.indexOf("checked") != -1) {
        radioSelect[iid].classList.remove("checked");
        this.currentIndex[cIndex].select = "";
        flag = false;
      } else {
        this.currentIndex[cIndex].select = index;
        flag = true;
      }

      let radioTopicOk = {
        name: "单选题",
        id: this.radioTopic[cIndex].id,
        finish: flag,
        option: radioSelect[iid].innerHTML,
        value: val[iid].innerHTML,
      };

      Bus.$emit("radioTopic", radioTopicOk);
    },

    _submited() {
      Bus.$on("submit", (fl) => {
        this.isSubmit = fl;
      });
    },
  },
  beforeDestroy() {
    Bus.$off("submit");
  },
};
</script>

<style scoped>
.radio .topic {
  margin-bottom: 50px;
}
.radio .mold {
  color: #a8a8b3;
}
.radio .name {
  width: 800px;
  line-height: 24px;
  margin-bottom: 20px;
}
.radio .select > p {
  padding: 5px 0 10px 0;
  line-height: 34px;
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  transition: all 0.3s;
}
.radio .select > p:hover {
  background-color: #f7fafc;
}
.radio .select p .option {
  height: 34px;
  width: 34px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 50%;
  border: 1px solid #e1eaf4;
  margin-right: 20px;
  transition: all 0.3s;
}
.radio .select p .checked {
  background-color: #6486ff;
  color: #fff;
}
.radio .select p:hover .option {
  background-color: #3a8bff;
  color: #e6f0ff;
}
.correctAnswer {
  height: 60px;
  line-height: 60px;
  text-indent: 1rem;
  font-size: 16px;
  background-color: #f2f4f7;
  border-left: 1px solid #6486ff;
}
.correctAnswer .correctOption {
  display: inline-block;
  margin-right: 8px;
  color: #6486ff;
  text-transform: uppercase;
}
</style>